<template>
  <div class="footer" v-if="visible">
    <el-form ref="opinionForm">
      <el-row :gutter="24" type="flex" justify="space-around" align="middle">
        <el-col :span="14" style="display: inline-block;">
          <el-form-item class="el-form-item" label="审批意见：" prop="inputOpinion" :error="errorMsg" :inline-message="true">
            <el-input v-model="opinionForm.inputOpinion" placeholder="请输入审批意见" style="width: 53%;" type="text"
                      maxlength="50"
                      show-word-limit></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="small" @click="approval(form,0)">同意</el-button>
          <el-button v-if="!adjustFlagShow" type="danger" size="small" @click="approval(form,1)">驳回</el-button>
          <el-popover v-else
                      placement="top"
                      width="160"
                      v-model="popoverVisible"
          >
            <p>是否跳过原流程驳回？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="showRejectPopover('Y')">是</el-button>
              <el-button type="primary" size="mini" @click="showRejectPopover('N')">否</el-button>
            </div>
            <el-button style="margin: 0 10px" type="danger" size="small" slot="reference">驳回</el-button>
          </el-popover>
          <el-button v-if="undetermined" size="small" type="warning" @click="approval(form,2)">待定</el-button>
          <el-button v-if="abstention" size="small" type="info" @click="approval(form,3)">弃权</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { formDataSave, formDataShow } from './approval'

  export default {
    name: 'ApprovalButton',
    props: {
      taskId: {
        required: true,
        type: String
      },
      visible: {
        required: false,
        type: Boolean,
        default: true
      },
      form: {
        required: true,
        type: Object
      },
      // 显示待定按钮
      undetermined: {
        required: false,
        type: Boolean,
        default: false
      },
      // 显示弃权按钮
      abstention: {
        required: false,
        type: Boolean,
        default: false
      },
      // 是否跳过原流程
      adjustFlagShow: {
        required: false,
        type: Boolean,
        default: true
      },
      confirmValidate: {
        required: false,
        type: Function,
        default: function() {
          return true
        }
      },
      approvalCallback: {
        required: false,
        type: Function,
        default: function() {
        }
      }
    },
    data() {
      return {
        formData: [],
        opinionForm: {
          inputOpinion: null
        },
        loading: null,
        validateEvent: false,
        errorMsg: '',
        // 系统是否数据字典
        sysYesOrNoOptions: [],
        popoverVisible: false
      }
    },
    created() {
      this.getDicts('sys_yes_no').then(response => {
        this.sysYesOrNoOptions = response.data
      })
    },
    mounted() {

    },
    methods: {

      // 确认是否跳过原流程
      showRejectPopover(adjustFlag) {
        this.popoverVisible = false;
        this.approval(this.form, 1, adjustFlag)
      },

      approval(val, num, adjustFlag) {
        //流程渲染
        let action = num
        this.formData = []
        formDataShow(this.taskId).then(response => {
          let datas = response.data
          for (let i = 0; i < datas.length; i++) {
            let strings = datas[i].split('--__!!')
            let controlValue = null
            let controlDefault = null
            switch (strings[1]) {
              case 'radio':
                controlValue = 0
                controlDefault = strings[4]
                break
            }
            this.formData.push({
              controlId: strings[0],
              controlType: strings[1],
              controlLable: strings[2],
              controlIsParam: strings[3],
              controlValue: controlValue,
              controlDefault: controlDefault
            })
          }
          this.beforeClose(action, adjustFlag)
        })
      },
      beforeClose: async function(action, adjustFlag) {
        const _this = this
        //同意
        if (action === 0) {
          //获取审批意见
          _this.formData[1]['controlValue'] = _this.opinionForm.inputOpinion
          this.$confirm('确定审核通过吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.openFullScreen()
            return formDataSave(_this.taskId, _this.formData)
          }).then(response => {
            if (response.code === 200) {
              this.loading.close()
              this.$message({
                type: 'success',
                message: '审核通过！'
              })
              this.callback()
            }
          })
        } else if (action === 1) {

          if (_this.adjustFlagShow) {
            let temp = Object.assign({}, this.formData[0])
            temp.controlId = 'rejectSkipFlow'
            temp.controlIsParam = 'i'
            temp.controlDefault = '是--__--否'
            temp.controlLable = '是否跳过原流程'
            if (adjustFlag === 'N') {
              temp.controlValue = 1
            } else if (adjustFlag === 'Y') {
              temp.controlValue = 0
            }
            _this.formData.push(temp)

            temp = Object.assign({}, this.formData[0])
            temp.controlId = 'rejectEvent'
            temp.controlIsParam = 'i'
            temp.controlDefault = ''
            temp.controlLable = '驳回节点'
            temp.controlType = ''
            temp.controlValue = this.formData[0].controlId
            _this.formData.push(temp)
          }

          //修改审批状态
          _this.formData[0]['controlValue'] = 1
          //获取审批意见
          _this.formData[1]['controlValue'] = _this.opinionForm.inputOpinion

          // 是否显示
          if (_this.opinionForm.inputOpinion) {
            this.$confirm('确定驳回吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.openFullScreen()
              return formDataSave(_this.taskId, _this.formData)
            }).then(response => {
              if (response.code === 200) {
                this.loading.close()
                this.$message({
                  type: 'warning',
                  message: '已驳回！'
                })
                this.callback()
              }
            })
          } else {
            _this.errorMsg = '请填写审批意见'
          }

        } else if (action === 2) {
          //修改审批状态
          _this.formData[0]['controlValue'] = 2
          //获取审批意见
          _this.formData[1]['controlValue'] = _this.opinionForm.inputOpinion

          if (this.opinionForm.inputOpinion) {
            this.$confirm('确定待定吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.openFullScreen()
              return formDataSave(_this.taskId, _this.formData)
            }).then(response => {
              if (response.code === 200) {
                this.loading.close()
                this.$message({
                  type: 'warning',
                  message: '已待定！'
                })
                this.callback()
              }
            })
          } else {
            _this.errorMsg = '请填写审批意见'
          }
        } else if (action === 3) {
          //修改审批状态
          _this.formData[0]['controlValue'] = 3
          //获取审批意见
          _this.formData[1]['controlValue'] = _this.opinionForm.inputOpinion

          if (this.opinionForm.inputOpinion) {
            this.$confirm('确定弃权吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.openFullScreen()
              return formDataSave(_this.taskId, _this.formData)
            }).then(response => {
              if (response.code === 200) {
                this.loading.close()
                this.$message({
                  type: 'warning',
                  message: '已弃权！'
                })
                this.callback()
              }
            })
          } else {
            _this.errorMsg = '请填写审批意见'
          }
        }
      },
      callback: function(action, instance) {
        const _this = this
        _this.opinionForm.inputOpinion = null
        _this.errorMsg = ''
        _this.adjustFlagShow = false
        _this.approvalCallback()
      },
      openFullScreen() {
        this.loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.1)'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    background-color: rgb(245, 247, 250);
    border-top: #ededed solid 1px;
  }

  .el-form-item {
    margin-bottom: 0;
  }
</style>
